<template>
  <view class="user-user-page">
    <!--    头像区域-->
    <view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30" @click="avatarAreaClick">
      <view class="u-m-r-10">
        <u-avatar :src="vuex_userInfo.avatar" size="120"></u-avatar>
      </view>
      <view class="u-flex-1">
        <view class="u-font-18 u-p-b-20">{{ vuex_userInfo.nickname || '未登录' }}</view>
        <view class="u-font-14 u-tips-color">
          微信号:
          <text v-if="wxNumber">{{wxNumber}}</text>
          <text v-else @click.stop="setMyWxNumberClick" style="color: #2979ff;">未认证</text>
        </view>
      </view>
      <view class="u-m-l-10 u-p-10">
        <u-icon name="arrow-right" color="#969799" size="28"></u-icon>
      </view>
    </view>

<!--    常用功能 -->
    <u-grid :col="4" :border="false" @click="routeTo">
      <u-grid-item index="userEnjoy">
        <u-icon name="heart-fill" :size="46"></u-icon>
        <view class="grid-text">我喜欢</view>
      </u-grid-item>
      <u-grid-item index="userEnjoyed">
        <u-icon name="heart" :size="46"></u-icon>
        <view class="grid-text">喜欢我</view>
      </u-grid-item>
      <u-grid-item index="userVisit">
        <u-icon name="eye-fill" :size="46"></u-icon>
        <view class="grid-text">我看过</view>
      </u-grid-item>
      <u-grid-item index="userVisited">
        <u-icon name="eye" :size="46"></u-icon>
        <view class="grid-text">看过我</view>
      </u-grid-item>
    </u-grid>

    <u-grid :col="4" :border="false" @click="routeTo">
      <u-grid-item index="userActivity">
        <u-icon name="huodong" :size="42" custom-prefix="iconfont"></u-icon>
        <view class="grid-text">我的活动</view>
      </u-grid-item>
      <u-grid-item index="userDynamic">
        <u-icon name="jinridongtai-xuanzhong" :size="42" custom-prefix="iconfont"></u-icon>
        <view class="grid-text">我的动态</view>
      </u-grid-item>
      <u-grid-item index="userRedBean">
        <u-icon name="hongdou" :size="42"  custom-prefix="iconfont"></u-icon>
        <view class="grid-text">红豆豆</view>
      </u-grid-item>
      <u-grid-item @click="$u.route('/pages/common/richText?code=help_service&title=帮忙与客服')">
        <u-icon name="kefu" :size="42" custom-prefix="iconfont"></u-icon>
        <view class="grid-text">帮助客服</view>
      </u-grid-item>
    </u-grid>

    <view class="u-m-t-20">
      <u-cell-group >
        <u-cell-item @click="routeTo('userOrder')" icon="order" title="订单"></u-cell-item>
      </u-cell-group>
    </view>


    <view class="u-m-t-20">
      <u-cell-group >
        <u-cell-item @click="routeTo('userIndentification')" icon=" iconfont iconfont-renzheng" title="认证"></u-cell-item>
        <u-cell-item @click="routeTo('userPoster')" icon=" iconfont iconfont-haibaozujian" title="海报"></u-cell-item>
        <u-cell-item @click="routeTo('userCard')" icon=" iconfont iconfont-kapian" title="卡片" custom-prefix="iconfont"></u-cell-item>
      </u-cell-group>
    </view>


    <view class="u-m-t-20">
      <u-cell-group >
        <u-cell-item @click="routeTo('userSetting')" icon="setting" title="投诉建议"></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-20">
      <u-cell-group >
        <u-cell-item @click="routeTo('userSetting')" icon="setting" title="设置"></u-cell-item>
      </u-cell-group>
    </view>
  </view>
</template>

<script>
import UserInfoUrl from '../../../../pc/UserInfoUrl.js'
export default {
  data() {
    return {
      // 我的用户信息
      myUserInfo: {},
      wxNumber: ''

    }
  },
  onLoad() {
    if(this.vuex_hasLogin){
      this.loadWxNumber()
    }
  },
  methods: {
    // 加载自己的微信号
    loadWxNumber(){
      this.$http.get(UserInfoUrl.wxNumber).then(res=>{
        this.wxNumber = res.data
      })
    },
    // 路由到相关页面
    routeTo(name){
      this.checkLogin().then(()=>{
        this.$u.route('/pages/user/' + name)
      })
    },
    // 头像区域点击
    avatarAreaClick(){
      this.routeTo('userInfo')
    },
    // 微信号 认证
    setMyWxNumberClick(){
      this.routeTo('identification/wxIdentification')
    }
  }
}
</script>

<style lang="scss" scoped>
page{
  background-color: #ededed;
}

.camera{
  padding-right: 12rpx;
  height: 44px;

  &:active{
    background-color: #ededed;
  }
}
.user-box{
  background-color: #fff;
}
</style>
